<!--
 * @Descripttion: 
 * @Author: wayde
 * @Date: 2021-04-16 16:51:51
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <title>多系列混合</title>
  </head>
  <body>
    <style>
      #chart {
        width: 1000px;
        height: 800px;
      }
    </style>
    <div id="chart">
      <script>
        const chartDom = document.getElementById("chart");
        const chart = echarts.init(chartDom);
        const option = {
          xAxis: {
            data: ["一季度", "二季度", "三季度", "四季度"],
          },
          yAxis: {},
          series: [
            {
              type: "pie",
              radius: "20%",
              center: ["55%", "20%"],
              cursor: "pointer",
              color: [
                "rgb(238, 102, 102)",
                "rgb(145, 204, 117)",
                "rgb(250, 200, 88)",
                "rgb(115, 192, 222)",
              ],
              emphasis: {
                focus: "seriess",
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)", // 折线颜色,
                },
              },

              data: [
                {
                  name: "分类1",
                  value: 100,
                },
                {
                  name: "分类2",
                  value: 200,
                },
                {
                  name: "分类3",
                  value: 300,
                },
                {
                  name: "分类4",
                  value: 400,
                },
              ],
            },
            {
              type: "line",
              data: [100, 112, 96, 123],
              color: "#00FF00",
            },
            {
              type: "bar",
              data: [79, 81, 88, 72],
              barWidth: 30,
              color: "rgb(145, 204, 117)",
              itemStyle: { //柱状图border等
                borderColor: "#00C1DE",
                borderWidth: 1,
              },
            },
          ],
        };
        chart.setOption(option);
      </script>
    </div>
  </body>
</html>
